<!doctype html>
<html class="no-js fixed-layout">
<head>
    <meta charset="UTF-8">
    <title>Login | 校园知事</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="stylesheet" href="/assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="/assets/css/admin.css">
    <link rel="stylesheet" href="/assets/css/appadmin.css">
    <link rel="stylesheet" href="assets/ueditor/third-party/webuploader/webuploader.css">
</head>
<body>
    {{template "admin/naver.html" .}}
    <!-- content start -->
    <div class="admin-content">
        <div class="admin-content-body">
            <div class="am-cf am-padding">
                <div class="am-fl am-cf">
                    <strong class="am-text-primary am-text-lg">修改首页轮播图</strong>
                </div>
            </div>
            <div class="am-container">
                <div class="am-g">
                    <div class="am-u-lg-6">
                        <form class="am-form" action="/admin/article/lunbotu/1" method="post" enctype="multipart/form-data">
                            <fieldset>
                                <div class="am-form-group">
                                    <input type="text" name="dname" class="" id="dname-1" maxlength="254" placeholder="输入第一张轮播图片的描述/简介" value='{{.Carousels_desc_1}}'>
                                </div>
                                <div class="am-form-group am-form-file">
                                    <div id="uploader-demo">
                                        <!--用来存放item-->
                                        <div id="fileList-1" class="uploader-list"></div>
                                        <div id="filePicker-1"><i class="am-icon-cloud-upload"></i>&nbsp;&nbsp;选择要上传的图片</div>
                                    </div>
                                </div>
                                <p>
                                    <button type="button" id="btn-1" class="am-btn am-btn-success">提交</button>
                                </p>
                            </fieldset>
                        </form>
                    </div>
                    <div class="am-u-lg-6">
                        <img src="{{.Carousels_img_1}}" class="am-img-thumbnail am-radius" id="pre_1" style="max-height: 200px">
                    </div>
                </div>
            	<div class="am-g">
                    <div class="am-u-lg-6">
                        <form class="am-form" action="/admin/article/lunbotu/2" method="post" enctype="multipart/form-data">
                            <fieldset>
                                <div class="am-form-group">
                                    <input type="text" name="dname" class="" id="dname-2" maxlength="254" placeholder="输入第二张轮播图片的描述/简介" value='{{.Carousels_desc_2}}'>
                                </div>
                                <div class="am-form-group am-form-file">
                                    <div id="uploader-demo">
                                        <!--用来存放item-->
                                        <div id="fileList-2" class="uploader-list"></div>
                                        <div id="filePicker-2"><i class="am-icon-cloud-upload"></i>&nbsp;&nbsp;选择要上传的图片</div>
                                    </div>
                                </div>
                                <p>
                                    <button type="button" id="btn-2" class="am-btn am-btn-success">提交</button>
                                </p>
                            </fieldset>
                        </form>
                    </div>
                    <div class="am-u-lg-6">
                        <img src="{{.Carousels_img_2}}" class="am-img-thumbnail am-radius" id="pre_2" style="max-height: 200px">
                    </div>
                </div>
			<div class="am-g">
                    <div class="am-u-lg-6">
                        <form class="am-form" action="/admin/article/lunbotu/3" method="post" enctype="multipart/form-data">
                            <fieldset>
                                <div class="am-form-group">
                                    <input type="text" name="dname" class="" id="dname-3" maxlength="254" placeholder="输入第三张轮播图片的描述/简介" value='{{.Carousels_desc_3}}'>
                                </div>
                                <div class="am-form-group am-form-file">
                                    <div id="uploader-demo">
                                        <!--用来存放item-->
                                        <div id="fileList-3" class="uploader-list"></div>
                                        <div id="filePicker-3"><i class="am-icon-cloud-upload"></i>&nbsp;&nbsp;选择要上传的图片</div>
                                    </div>
                                </div>
                                <p>
                                    <button type="button" id="btn-3" class="am-btn am-btn-success">提交</button>
                                </p>
                            </fieldset>
                        </form>
                    </div>
                    <div class="am-u-lg-6">
                        <img src="{{.Carousels_img_3}}" class="am-img-thumbnail am-radius" id="pre_3" style="max-height: 200px">
                    </div>
                </div>
			<div class="am-g">
                    <div class="am-u-lg-6">
                        <form class="am-form" action="/admin/article/lunbotu/4" method="post" enctype="multipart/form-data">
                            <fieldset>
                                <div class="am-form-group">
                                    <input type="text" name="dname" class="" id="dname-4" maxlength="254" placeholder="输入第四张轮播图片的描述/简介" value='{{.Carousels_desc_4}}'>
                                </div>
                                <div class="am-form-group am-form-file">
                                    <div id="uploader-demo">
                                        <!--用来存放item-->
                                        <div id="fileList-4" class="uploader-list"></div>
                                        <div id="filePicker-4"><i class="am-icon-cloud-upload"></i>&nbsp;&nbsp;选择要上传的图片</div>
                                    </div>
                                </div>
                                <p>
                                    <button type="button" id="btn-4" class="am-btn am-btn-success">提交</button>
                                </p>
                            </fieldset>
                        </form>
                    </div>
                    <div class="am-u-lg-6">
                        <img src="{{.Carousels_img_4}}" class="am-img-thumbnail am-radius" id="pre_4" style="max-height: 200px">
                    </div>
                </div>
		</div>
        </div>
    </div>
   {{template "admin/footer.html" .}}
    <!--[if lt IE 9]>
    <script src="assets/js/jquery.ltie9.min.js"></script>
    <script src="assets/js/modernizr.ltie9.js"></script>
    <script src="assets/js/amazeui.ie8polyfill.min.js"></script>
    <![endif]-->
    <!--[if (gte IE 9)|!(IE)]>
    <!-->
    <script src="assets/js/jquery.min.js"></script>
    <!--<![endif]-->
    <script src="assets/js/amazeui.min.js"></script>
    <script src="assets/layer/layer.js"></script>
    <script src="assets/ueditor/third-party/webuploader/webuploader.min.js"></script>
    <script src="assets/js/app.js"></script>

    <script type="text/javascript">
      function _init_1() {
            var $list = $("fileList-1"), $btn = $("#btn-1"),
       // 优化retina, 在retina下这个值是2
       ratio = window.devicePixelRatio || 1,
        state = 'pending',

       // 缩略图大小
       thumbnailWidth = 964 * ratio,
       thumbnailHeight = 300 * ratio;
            // 初始化Web Uploader
            var uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                fileVal: 'img_1',
                auto: false,
                // swf文件路径
                swf: 'assets/ueditor/third-party/webuploader/Uploader.swf',
                // 文件接收服务端。
                server: '/admin/article/lunbotu/1',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker-1',
                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });
            // 当有文件添加进来的时候
            uploader.on('fileQueued', function (file) {
                var $li = $(
                        '<div id="' + file.id + '" class="file-item thumbnail">' +
                            '<img>' +
                            '<div class="info">' + file.name + '</div>' +
                        '</div>'
                        ),
                    $img = $li.find('img');
                // $list为容器jQuery实例
                $list.html($li);
                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $("#pre_1").attr('src', src);
                    // $img.attr('src', src);
                }, thumbnailWidth, thumbnailHeight);
            });
            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress span');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<p class="progress"><span></span></p>')
                            .appendTo($li)
                            .find('span');
                }

                $percent.css('width', percentage * 100 + '%');
            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function (file) {
                $('#' + file.id).addClass('upload-state-done');
            });

            // 文件上传失败，显示上传出错。
            uploader.on('uploadError', function (file) {
                var $li = $('#' + file.id),
                    $error = $li.find('div.error');

                // 避免重复创建
                if (!$error.length) {
                    $error = $('<div class="error"></div>').appendTo($li);
                }

                $error.text('上传失败');
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on('uploadSuccess', function (file,res) {
                console.log(file,res);
			if(res.status===1){
				layer.msg('上传成功', { offset: '15%', icon: 6 ,time:1000 });
			}else{
				layer.msg('上传失败，请再次上传', { offset: '15%', icon: 5  ,time:1000});
			}
                $('#' + file.id).find('.progress').remove();
            });
            $btn.on('click', function () {
			uploader.options.formData={dname:$("#dname-1").val()};
                if (state === 'uploading') {
                    uploader.stop();
                } else {
                    uploader.upload();
                }
            });
        }
	function _init_2() {
            var $list = $("fileList-2"), $btn = $("#btn-2"),
       // 优化retina, 在retina下这个值是2
       ratio = window.devicePixelRatio || 1,
        state = 'pending',

       // 缩略图大小
       thumbnailWidth = 964 * ratio,
       thumbnailHeight = 300 * ratio;
            // 初始化Web Uploader
            var uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                fileVal: 'img_2',
                auto: false,
                // swf文件路径
                swf: 'assets/ueditor/third-party/webuploader/Uploader.swf',
                // 文件接收服务端。
                server: '/admin/article/lunbotu/2',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker-2',
                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });
            // 当有文件添加进来的时候
            uploader.on('fileQueued', function (file) {
                var $li = $(
                        '<div id="' + file.id + '" class="file-item thumbnail">' +
                            '<img>' +
                            '<div class="info">' + file.name + '</div>' +
                        '</div>'
                        ),
                    $img = $li.find('img');
                // $list为容器jQuery实例
                $list.html($li);
                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $("#pre_2").attr('src', src);
                    // $img.attr('src', src);
                }, thumbnailWidth, thumbnailHeight);
            });
            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress span');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<p class="progress"><span></span></p>')
                            .appendTo($li)
                            .find('span');
                }

                $percent.css('width', percentage * 100 + '%');
            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function (file) {
                $('#' + file.id).addClass('upload-state-done');
            });

            // 文件上传失败，显示上传出错。
            uploader.on('uploadError', function (file) {
                var $li = $('#' + file.id),
                    $error = $li.find('div.error');

                // 避免重复创建
                if (!$error.length) {
                    $error = $('<div class="error"></div>').appendTo($li);
                }

                $error.text('上传失败');
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on('uploadSuccess', function (file,res) {
                console.log(file,res);
			if(res.status===1){
				layer.msg('上传成功', { offset: '15%', icon: 6 ,time:1000 });
			}else{
				layer.msg('上传失败，请再次上传', { offset: '15%', icon: 5  ,time:1000});
			}
                $('#' + file.id).find('.progress').remove();
            });
            $btn.on('click', function () {
				uploader.options.formData={dname:$("#dname-2").val()};
                if (state === 'uploading') {
                    uploader.stop();
                } else {
                    uploader.upload();
                }
            });
        }
     function _init_3() {
            var $list = $("fileList-3"), $btn = $("#btn-3"),
       // 优化retina, 在retina下这个值是2
       ratio = window.devicePixelRatio || 1,
        state = 'pending',

       // 缩略图大小
       thumbnailWidth = 964 * ratio,
       thumbnailHeight = 300 * ratio;
            // 初始化Web Uploader
            var uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                fileVal: 'img_3',
                auto: false,
                // swf文件路径
                swf: 'assets/ueditor/third-party/webuploader/Uploader.swf',
                // 文件接收服务端。
                server: '/admin/article/lunbotu/3',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker-3',
                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });
            // 当有文件添加进来的时候
            uploader.on('fileQueued', function (file) {
                var $li = $(
                        '<div id="' + file.id + '" class="file-item thumbnail">' +
                            '<img>' +
                            '<div class="info">' + file.name + '</div>' +
                        '</div>'
                        ),
                    $img = $li.find('img');
                // $list为容器jQuery实例
                $list.html($li);
                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $("#pre_3").attr('src', src);
                    // $img.attr('src', src);
                }, thumbnailWidth, thumbnailHeight);
            });
            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress span');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<p class="progress"><span></span></p>')
                            .appendTo($li)
                            .find('span');
                }

                $percent.css('width', percentage * 100 + '%');
            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function (file) {
                $('#' + file.id).addClass('upload-state-done');
            });

            // 文件上传失败，显示上传出错。
            uploader.on('uploadError', function (file) {
                var $li = $('#' + file.id),
                    $error = $li.find('div.error');

                // 避免重复创建
                if (!$error.length) {
                    $error = $('<div class="error"></div>').appendTo($li);
                }

                $error.text('上传失败');
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on('uploadSuccess', function (file,res) {
                console.log(file,res);
			if(res.status===1){
				layer.msg('上传成功', { offset: '15%', icon: 6 ,time:1000 });
			}else{
				layer.msg('上传失败，请再次上传', { offset: '15%', icon: 5  ,time:1000});
			}
                $('#' + file.id).find('.progress').remove();
            });
            $btn.on('click', function () {
				uploader.options.formData={dname:$("#dname-3").val()};
                if (state === 'uploading') {
                    uploader.stop();
                } else {
                    uploader.upload();
                }
            });
        }
	function _init_4() {
            var $list = $("fileList-4"), $btn = $("#btn-4"),
       // 优化retina, 在retina下这个值是2
       ratio = window.devicePixelRatio || 1,
        state = 'pending',

       // 缩略图大小
       thumbnailWidth = 964 * ratio,
       thumbnailHeight = 300 * ratio;
            // 初始化Web Uploader
            var uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                fileVal: 'img_4',
                auto: false,
                // swf文件路径
                swf: 'assets/ueditor/third-party/webuploader/Uploader.swf',
                // 文件接收服务端。
                server: '/admin/article/lunbotu/4',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker-4',
                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });
            // 当有文件添加进来的时候
            uploader.on('fileQueued', function (file) {
                var $li = $(
                        '<div id="' + file.id + '" class="file-item thumbnail">' +
                            '<img>' +
                            '<div class="info">' + file.name + '</div>' +
                        '</div>'
                        ),
                    $img = $li.find('img');
                // $list为容器jQuery实例
                $list.html($li);
                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $("#pre_4").attr('src', src);
                    // $img.attr('src', src);
                }, thumbnailWidth, thumbnailHeight);
            });
            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress span');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<p class="progress"><span></span></p>')
                            .appendTo($li)
                            .find('span');
                }

                $percent.css('width', percentage * 100 + '%');
            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function (file) {
                $('#' + file.id).addClass('upload-state-done');
            });

            // 文件上传失败，显示上传出错。
            uploader.on('uploadError', function (file) {
                var $li = $('#' + file.id),
                    $error = $li.find('div.error');

                // 避免重复创建
                if (!$error.length) {
                    $error = $('<div class="error"></div>').appendTo($li);
                }

                $error.text('上传失败');
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on('uploadSuccess', function (file,res) {
                console.log(file,res);
			if(res.status===1){
				layer.msg('上传成功', { offset: '15%', icon: 6 ,time:1000 });
			}else{
				layer.msg('上传失败，请再次上传', { offset: '15%', icon: 5  ,time:1000});
			}
                $('#' + file.id).find('.progress').remove();
            });
            $btn.on('click', function () {
				uploader.options.formData={dname:$("#dname-4").val()};
                if (state === 'uploading') {
                    uploader.stop();
                } else {
                    uploader.upload();
                }
            });
        }
	$(function () {
            _init_1();
	 	_init_2();
		_init_3();
		_init_4();
            $('.doc-form-file').on('change', function () {
                var fileNames = '';
                $.each(this.files, function () {
                    fileNames += '<span class="am-badge">' + this.name + '</span> ';
                });
                $('#file-list').html(fileNames);
            });
        });
        function selelctFile(ts, ele) {
            document.getElementById(ele).src = getFileUrl(ts)
        }
        function getFileUrl(sourceId) {
            var url;
            if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE
                url = document.getElementById(sourceId).value;
            } else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox
                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
            } else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome
                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
            }
            return url;
        }

    </script>
</body>
</html>
